<template>
    <div class="PPTList">
        <div class="PPTList-header">
            <a-space>
                <a-button @click="onCallBackChange"
                    v-if="pagination.pageNum == 1 || pagination.pageNum == total">昼夜隐患</a-button>
                <PPTAddButton :onCallBack="init" v-if="pagination.pageNum == 1" :item="{ addTime: otherData.date }">
                </PPTAddButton>
                <a-space v-if="total != 0 && list.length > 0">
                    <PPTCopyButton :onCallBack="init" :id="item.id"></PPTCopyButton>
                    <PPTAddButton :onCallBack="init" :item="item"></PPTAddButton>
                    <PPTDelete :onCallBack="init" :item="list[list.length - 1]" type="diy">
                    </PPTDelete>
                </a-space>
            </a-space>
            <a-space>
                <ZsSelectData :formData="otherData" :onCallBack="dataChange" dataIndex="date" type="pptList"
                    :menuId="menuId">
                </ZsSelectData>
            </a-space>
        </div>
        <div class="PPTList-wrap" :class="`${item.showType}-${item.imgPosition}`" :titles="item.title ? '' : 'title'">
            <template v-if="list.length != 0 && !loading">
                <template v-if="item.showType == 'picture'">
                    <div class="imgWrap">
                        <viewer class="viewer">
                            <a-row class="row">
                                <a-col :style="imgStyle" v-for="item in item.images" :key="item" :span="colSpanCom">
                                    <div class="imgWrap-item">
                                        <img :src="item" />
                                    </div>
                                </a-col>
                            </a-row>
                        </viewer>
                    </div>
                </template>
                <template v-else-if="item.showType == 'text'">
                    <div class="textWrap" :class="[item.contentSet.family, item.contentSet.fontSize]">
                        <div class="textWrap-header" v-if="item.title">{{ item.title }}</div>
                        <div class="textWrap-content"
                            :style="{ height: item.title ? 'calc(100% - 60px)' : 'calc(100% - 20px)' }">
                            <template v-if="item.fill == 'text'">
                                <a-row v-for="(i, index) in item.textInfo" :key="index">
                                    <div class="textRow">
                                        <p class="textRow-value" :class="{ textIn: !i.label }">
                                            <span>
                                                {{ i.label }}
                                            </span>
                                            <span v-if="i.label">：</span>
                                            {{ i.value }}
                                        </p>
                                    </div>
                                </a-row>
                            </template>
                            <template v-else-if="item.fill == 'table'">
                                <div class="tableWrap">
                                    <a-table :columns="item.tableHead" :data-source="item.tableData" :pagination="false"
                                        :scroll="{ y: item.title ? 'calc(100vh - 62px - 20px - 40px - 60px - 16px - 50px - 48px - 48px)' : 'calc(100vh - 62px - 20px - 40px - 16px - 20px - 30px - 48px - 48px)' }">
                                    </a-table>
                                </div>
                            </template>
                        </div>
                    </div>

                </template>
                <template v-else-if="item.showType == 'textAndPicture'">
                    <div class="textAndPictureWrap" :style="TandP">
                        <div class="textAndPictureWrap-img" :style="imgWrapStyle('img')">
                            <viewer class="viewer">
                                <a-row class="row">
                                    <a-col :style="imgStyle" v-for="item in item.images" :key="item" :span="colSpanCom">
                                        <div class="imgWrap-item">
                                            <img :src="item" />
                                            <!-- 这个图片没有id，目前先不开发 -->
                                            <!-- <PPTImgEdit  :item="{ url: item, id: `` }"></PPTImgEdit>  -->
                                        </div>
                                    </a-col>
                                </a-row>
                            </viewer>
                        </div>
                        <div class="textAndPictureWrap-text" :style="imgWrapStyle('text')">
                            <div class="textAndPictureWrap-text-header"
                                :class="[item.titleSet.family, item.titleSet.fontSize]" v-if="item.title">
                                {{ item.title }}</div>
                            <div class="textAndPictureWrap-text-content"
                                :class="[item.contentSet.family, item.contentSet.fontSize]"
                                :style="{ height: item.title ? 'calc(100% - 60px)' : '' }">
                                <template v-if="item.fill == 'text'">
                                    <a-row v-for="(i, index) in item.textInfo" :key="index">
                                        <div class="textRow">
                                            <p class="textRow-value" :class="{ textIn: !i.label }">
                                                <span>
                                                    {{ i.label }}
                                                </span>
                                                <span v-if="i.label">：</span>
                                                {{ i.value }}
                                            </p>
                                        </div>
                                    </a-row>
                                </template>
                                <template v-else-if="item.fill == 'table'">
                                    <div class="tableWrap">
                                        <a-table :columns="item.tableHead" :data-source="item.tableData"
                                            :pagination="false" :scroll="{ y: tableScroolY }">
                                        </a-table>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </template>
            <template v-else>
                <a-spin v-if="loading"
                    style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"></a-spin>
                <a-empty style="margin-top: 20vh;" v-else></a-empty>
            </template>
        </div>
        <div class="PPTList-footer">
            <a-space>
                共<span style="padding: 0px 4px">{{ total }}</span>条
            </a-space>
            <a-space>
                <a-pagination :current="pagination.pageNum" :pageSize="pagination.pageSize" size="small" :total="total"
                    show-quick-jumper @change="paginChange" @showSizeChange="onShowSizeChange" />

                <template v-if="item.showType != 'picture'">
                    <Speak :item="item" :type="item.showType"></Speak>
                </template>
            </a-space>
        </div>
    </div>
</template>
<script>
import moment from 'moment';
import PPTAddButton from './PPTAddButton.vue';
import PPTDelete from './PPTDelete.vue';
import Speak from '@/components/Speak/index';
import ZsSelectData from '../ZsSelectData.vue';
import PPTImgEdit from './PPTImgEdit.vue';
import PPTCopyButton from './PPTCopyButton.vue';

export default {
    name: 'PPTList',
    components: {
        PPTAddButton,
        PPTDelete,
        Speak,
        ZsSelectData,
        PPTImgEdit,
        PPTCopyButton,
    },
    props: {
        onCallBackChange: {
            type: Function
        },
        menuId: {
            type: [String, Number],
            default: '',
        }
    },
    data() {
        return {
            total: 0,
            pagination: {
                pageNum: 1,
                pageSize: 1,
            },
            list: [],
            loading: false,
            otherData: {
                date: '',
            },
        }
    },
    methods: {
        init(type) {
            let newPaginTion = {
                ...this.pagination,
                pageNum: 1,
            };
            let aParams = {
                ...newPaginTion,
                ...this.otherData,
            }
            if (type == 'rest') {
                aParams['date'] = moment().format("YYYY-MM-DD")
            }
            this.pagination = newPaginTion;
            this.getList(aParams);
        },
        paginChange(current, pageSize) {
            let newPaginTion = {
                ...this.pagination,
                pageNum: current,
                pageSize,
            };
            this.pagination = newPaginTion;
            this.getList(this.pagination);
        },
        onShowSizeChange(current, pageSize) {
            let newPaginTion = {
                ...this.pagination,
                pageNum: current,
                pageSize,
            };
            this.pagination = newPaginTion;
            this.getList(this.pagination);
        },
        getList(aParams) {
            let params = {
                ...this.pagination,
                ...this.otherData,
                ...aParams,
            };
            this.loading = true;
            this.list = [];
            this.getAxios(this.$pageListXL, params)
                .then((res) => {
                    if (res) {
                        if (res.code == 200) {
                            this.total = res.data.total;
                            this.list = res.data.records;
                        } else {
                        }
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        dataChange(v, d) {
            let otherData = {
                ...this.otherData,
                [d]: v
            }
            let newPaginTion = {
                ...this.pagination,
                pageNum: 1,
            };
            this.pagination = newPaginTion;
            this.otherData = otherData
            this.getList({ ...otherData, ...newPaginTion });
        },
        // 图片位置
        imgWrapStyle(type) {
            let res = {};
            let info = this.item;
            if (type == 'img') {
                switch (info.imgPosition) {
                    case 'top':
                    case 'bottom':
                        res['min-height'] = '50%';
                        break;
                }
            } else if (type == 'text') {
                switch (info.imgPosition) {
                    case 'top':
                    case 'bottom':
                        res['max-height'] = '50%';
                        break;
                }
            }
            return res;
        },
    },
    mounted() {
        this.otherData = {
            ...this.otherData,
            date: moment().format("YYYY-MM-DD")
        }
        this.getList();
    },
    computed: {
        colSpanCom() {
            let info = this.item;
            let img = info.images;
            let res = 24;

            if (Array.isArray(img)) {
                let l = img.length;
                if (info.showType == 'textAndPicture' && ['top', 'bottom'].includes(info.imgPosition)) {
                    switch (l) {
                        case 1:
                            res = 24;
                            break
                        case 2:
                            res = 12;
                            break;
                        case 3:
                        case 5:
                        case 6:
                            res = 8;
                            break;
                        case 4:
                        case 7:
                        case 8:
                            res = 6;
                            break;
                        case 9:
                            res = 8;
                            break;
                    }
                } else {
                    switch (l) {
                        case 1:
                            res = 24;
                            break
                        case 2:
                        case 4:
                            res = 12;
                            break;
                        case 3:
                        case 5:
                        case 6:
                        case 9:
                            res = 8;
                            break;
                        case 7:
                        case 8:
                            res = 6
                            break;
                    }
                }
            }
            return res;
        },
        imgStyle() {
            let info = this.item;
            let img = info.images;
            let height = '100%';

            if (Array.isArray(img)) {
                let l = img.length;
                if (info.showType == 'textAndPicture' && ['top', 'bottom'].includes(info.imgPosition)) {
                    switch (l) {
                        case 1:
                        case 2:
                        case 3:
                        case 4:
                            height = '100%';
                            break;
                        case 5:
                        case 6:
                        case 7:
                        case 8:
                            height = '50%';
                            break;
                        case 9:
                            height = '33.33%';
                            break;
                    }
                } else {
                    switch (l) {
                        case 1:
                        case 2:
                        case 3:
                            height = '100%';
                            break
                        case 4:
                        case 5:
                        case 6:
                        case 7:
                        case 8:
                            height = '50%';
                            break;
                        case 9:
                            height = '33.33%';
                            break;
                    }
                }
            }
            return {
                height: height
            };
        },
        // 文字和图片
        TandP() {
            let res = {};
            let info = this.item;
            switch (info.imgPosition) {
                case 'left':
                    res['flex-direction'] = 'row';
                    break;
                case 'right':
                    res['flex-direction'] = 'row-reverse';
                    break;
                case 'top':
                    res['flex-direction'] = 'column';
                    break;
                case 'bottom':
                    res['flex-direction'] = 'column-reverse';
                    res['justify-content'] = 'flex-end';
                    break;
            }
            return res;
        },
        tableScroolY() {
            let info = this.item;
            let title = info.title;
            let res = '';
            if (info.showType == 'textAndPicture' && ['top', 'bottom'].includes(info.imgPosition)) {
                res = title ? 'calc(50vh - 62px - 20px - 40px - 16px - 50px - 21px - 31px)' : 'calc(50vh - 62px - 16px - 20px - 30px - 21px)'
            } else {
                res = title ? 'calc(100vh - 62px - 20px - 40px - 60px - 16px - 50px)' : 'calc(100vh - 62px - 20px - 40px - 16px - 20px - 30px)';
            }
            return res;
        },
        item() {
            let res = {};
            let list = this.list;
            if (list.length > 0) {
                let nowItem = list[list.length - 1]
                res = {
                    id: nowItem.id,
                    // 设置默认值，兼容之前的数据
                    titleSet: {
                        family: '',
                        fontSize: '',
                    },
                    contentSet: {
                        family: '',
                        fontSize: '',
                    },
                    ...JSON.parse(nowItem.value),
                };
            }
            return res;
        }
    },
}
</script>
<style lang="less" scoped>
.PPTList {
    width: 100%;
    background-color: #ffffff;
    height: calc(100vh - 20px - 62px);
    flex-direction: column;
    position: relative;
    z-index: 0;

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(~@/assets/images/ppt/backImg.jpg);
        background-size: 100% 100%;
        z-index: -1;
        /* 设置伪元素的透明度，从而影响整个背景图像 */
        pointer-events: none;
    }

    &-header {
        // padding: 10px 10px 0px 10px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 12px;
    }

    &-wrap {
        height: calc(100vh - 40px - 62px - 20px - 42px);
        padding: 8px;
        overflow-x: hidden;
        overflow-y: hidden;
        // background-color: lightpink;
    }

    &-footer {
        background: rgba(255, 255, 255, 0.5);
        height: 40px;
        width: 100%;
        display: flex;
        padding: 0px 12px;
        justify-content: space-between;
        border-top: 1px solid #cdcdcd;

    }

    // 图片
    .imgWrap {
        height: 100%;
        padding-top: 48px;

        .viewer,
        .row {
            height: 100%;
        }

        &-item {
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

    }

    .tableWrap {

        ::v-deep {
            .ant-table-thead th {
                background-color: #0F6FC6;
                color: #ffffff;
            }

            .ant-table-thead {
                font-size: 24px;
                flex-wrap: 560;
            }

            .ant-table-tbody {
                font-size: 20px;
                flex-wrap: 560;
            }
        }
    }

    // 文字
    .textWrap {
        display: flex;
        flex-direction: column;


        &-header {
            height: 60px;
            font-size: 40px;
            font-weight: 560;
            text-align: center;
            flex: 0 0 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &-content {

            .textRow {
                font-size: 34px;
                font-weight: 560;

                &-value {
                    margin-bottom: 12px;
                }

                .textIn {
                    text-indent: 2em;
                }
            }
        }
    }

    .textAndPictureWrap {
        display: flex;
        height: 100%;

        &-img {
            width: 100%;
            // padding: 8px 12px;

            .viewer {
                width: 100%;
                height: 100%;

                .row {
                    height: 100%;
                }
            }
        }

        &-text {
            width: 100%;
            padding: 0px 12px;

            ::-webkit-scrollbar {
                width: 4px !important;
            }

            &-header {
                height: 60px;
                font-size: 40px;
                font-weight: 560;
                text-align: center;
                flex: 0 0 60px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            &-content {
                // padding: 8px 12px;
                // height: calc(100% - 60px);/
                overflow-x: hidden;
                overflow-y: auto;


                .textRow {
                    font-size: 34px;
                    font-weight: 560;

                    &-value {
                        margin-bottom: 12px;
                    }

                    .textIn {
                        text-indent: 2em;
                    }
                }
            }
        }
    }
}

.autoHeight {
    height: auto;
}

.autoHeight {
    height: auto;
}

.autoClass {
    width: 100%;
    height: 100%;
}

// 标题特殊位置移动
.textAndPicture-left {
    .textAndPictureWrap-text {
        margin-top: 48px;
    }
}

.text-left[titles='title'] {
    height: calc(100vh - 40px - 62px - 20px - 42px - 36px) !important;
    margin-top: 36px !important;
    overflow-y: auto;
}

.ant-row {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 40px - 62px - 20px - 42px - 36px) !important;
}

// 字体
.fangsong {
    font-family: huiwenfangsong;
}

.heiti {
    font-family: heiti;
}

.font15 {
    font-size: 20px !important;

    ::v-deep {

        th,
        td {
            font-size: 20px !important;
        }
    }
}

.font18 {
    font-size: 24px !important;

    ::v-deep {

        th,
        td {
            font-size: 24px !important;
        }
    }
}

.font20 {
    font-size: 29px !important;

    ::v-deep {

        th,
        td {
            font-size: 29px !important;
        }
    }
}

.font22 {
    font-size: 34px !important;

    ::v-deep {

        th,
        td {
            font-size: 34px !important;
        }
    }
}

.font24 {
    font-size: 48px !important;

    ::v-deep {

        th,
        td {
            font-size: 48px !important;
        }
    }
}
</style>